import React from 'react'
import { Avatar,Image,Tag,Space } from 'antd-mobile'
import './index.css'
import DemoImg from '../../image/scien-dog.png'
export default function Board(props) {
  const {avatar,nickname,content,time,picture} = props
  return (
    //帖子组件
    <div className='board-container'>
    {/* 用户区域 */}
        <div className="board-header" style={{display:'flex'}}>
            <Avatar src={avatar ? avatar : DemoImg}></Avatar>
            <div style={{marginLeft:'10px'}}>
                <strong>{nickname}</strong>
                <hr style={{border:'1px solid #f8f8fa'}} />
                <small>{time}</small>
            </div>
            {/* 内容区域 */}
        </div>
        <div className="board-content">
               <div style={{marginBottom:'10px'}}>
                  {content}
               </div>
              {picture ?  <Image width='100px' height='100px' src={picture}></Image> : '' }
        </div>

        <div className="board-footer">
            <Tag
                color='primary'
                fill='outline'
                style={{ '--border-radius': '6px' }}
              >
                寻宠手册
              </Tag>

              <Space>
                  <div>点赞</div>
                  <div>评论</div>
              </Space>
        </div>
    </div>
  )
}
